<template>
  <v-chart :option="option"></v-chart>
</template>
<script>
import "echarts/extension/bmap/bmap.js";
import { getMapdata } from "../../api";
// convertData函数用于将数据转化成百度地图的散点图数据格式=>[{city: "北京", value: [精度,纬度,销售额]}]
function convertData(city, geodata) {
  let arr = [];
  city.forEach((city) => {
    let geo = geodata[city["name"]];
    if (geo) {
      arr.push({
        name: city.name,
        value: geo.concat(city.value),
      });
    }
  });
  return arr;
}
export default {
  data() {
    return {
      option: {},
    };
  },
  methods: {
    renderChart(data) {
      this.option = {
        bmap: {
          key: "6S8D5VPe41l33reud0MWxMq7CMy2NGNF",
          center: [108.954355, 34.346721],
          zoom: 5,
          roam: true,
          //   mapStyle: {
          //     styleJson: [
          //       {
          //         featureType: "water",
          //         elementType: "all",
          //         stylers: {
          //           color: "#d1d1d1",
          //         },
          //       },
          //       {
          //         featureType: "land",
          //         elementType: "all",
          //         stylers: {
          //           color: "#f3f3f3",
          //         },
          //       },
          //       {
          //         featureType: "railway",
          //         elementType: "all",
          //         stylers: {
          //           visibility: "off",
          //         },
          //       },
          //       {
          //         featureType: "highway",
          //         elementType: "all",
          //         stylers: {
          //           color: "#fdfdfd",
          //         },
          //       },
          //       {
          //         featureType: "highway",
          //         elementType: "labels",
          //         stylers: {
          //           visibility: "off",
          //         },
          //       },
          //       {
          //         featureType: "arterial",
          //         elementType: "geometry",
          //         stylers: {
          //           color: "#fefefe",
          //         },
          //       },
          //       {
          //         featureType: "arterial",
          //         elementType: "geometry.fill",
          //         stylers: {
          //           color: "#fefefe",
          //         },
          //       },
          //       {
          //         featureType: "poi",
          //         elementType: "all",
          //         stylers: {
          //           visibility: "off",
          //         },
          //       },
          //       {
          //         featureType: "green",
          //         elementType: "all",
          //         stylers: {
          //           visibility: "off",
          //         },
          //       },
          //       {
          //         featureType: "subway",
          //         elementType: "all",
          //         stylers: {
          //           visibility: "off",
          //         },
          //       },
          //       {
          //         featureType: "manmade",
          //         elementType: "all",
          //         stylers: {
          //           color: "#d1d1d1",
          //         },
          //       },
          //       {
          //         featureType: "local",
          //         elementType: "all",
          //         stylers: {
          //           color: "#d1d1d1",
          //         },
          //       },
          //       {
          //         featureType: "arterial",
          //         elementType: "labels",
          //         stylers: {
          //           visibility: "off",
          //         },
          //       },
          //       {
          //         featureType: "boundary",
          //         elementType: "all",
          //         stylers: {
          //           color: "#fefefe",
          //         },
          //       },
          //       {
          //         featureType: "building",
          //         elementType: "all",
          //         stylers: {
          //           color: "#d1d1d1",
          //         },
          //       },
          //       {
          //         featureType: "label",
          //         elementType: "labels.text.fill",
          //         stylers: {
          //           color: "#999999",
          //         },
          //       },
          //     ],
          //   },
        },
        title: {
          text: "新中地网点地图",
          left: "center",
        },
        tooltip: {},
        series: [
          {
            name: "新中地外卖",
            type: "scatter",
            coordinateSystem: "bmap",
            data,
            symbolSize(value) {
              return value[2] / 10;
            },
            encode: {
              value: 2,
            },
          },
        ],
      };
    },
  },
  async mounted() {
    const { data } = await getMapdata();
    this.renderChart(convertData(data.city, data.geodata));
  },
};
</script>
<style scoped></style>
